<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">


    <link rel="stylesheet" href="../static/css/base/reset.css">

    <link rel="stylesheet" href="../static/css/base/base.css">

    <link rel="stylesheet" href="../static/css/base/color.css">

    <link rel="stylesheet" href="../static/css/base/backgroudcolor.css">

    <link rel="stylesheet" href="../static/css/base/border.css">

    <link rel="stylesheet" href="../static/css/base/fontsize.css">

    <link rel="stylesheet" href="../static/css/base/padding.css">

    <link rel="stylesheet" href="../static/css/base/margin.css">


    <link rel="stylesheet" href="../static/css/base/widget.css">


    <style>

        body, html {
            background-color: #f5f5f5;
            color: #333;
            font-family: "微软雅黑 Light";
            font-size: 14px;
        }

        body:before {
            background-color: #f5f5f5;
        }

        /*内容用些包*/
        .sc-container {
            width: calc(100% - 200px);
            min-width: 1000px;
            margin: 0 auto;
            background-color: transparent;
            line-height: 30px;
            line-height: 30px;
        }

        /*结构性以 -wrap 结尾*/
        .sc-container > [id$="wrap"] {
            display: block;
            clear: both;
            *zoom: 1;
            margin-top: 20px;
        }

        /*空元素隐藏*/
        .sc-container > [id$="wrap"]:empty {
            display: none;
        }

        .wp90 {
            width: 90%;
        }

        .w48 {
            width: 36px;
            height: 36px;
            /*background-color: orangered;*/
        }

        .left-wrap {
            height: 100%;
            height: auto;
        }

        .line {
            height: 1px;
            width: 50%;
            margin-left: 50%;
            border-left: 1px dotted #d7d7d7;
            margin-top: 24px;
        }

        .clearfix {
            clear: both;
        }

        .left-wrap {
            width: 36px;
        }

        .right-wrap {
            width: calc(100% - 36px);
        }

    </style>

</head>

<body style="">

<div class="sc-container clearfix">


    <div class="form-wrap">

        <div class="clearfix" style="margin: 10px auto;">
            <a class="toggleWidget"
               style="padding: 3px 10px; border: 1px #eee solid; background-color: deepskyblue; cursor: pointer;">全部折叠切换</a>
        </div>

        <div class="fl left-wrap">
            <div class="line"></div>
        </div>

        <div class="fl  right-wrap">


            <div class="widget flat">
                <div class="widget-header lined">

                    <span class="foreIcon">
                         <i class="fa fa-check-circle yellow"></i>
                    </span>
                    <i class="fa fa-arrow-down widget-icon "></i>
                    <span class="widget-caption ft-18">单栏表单</span>

                    <div class="widget-buttons">
                        <a href="#" data-toggle="collapse"><i class="fa fa-minus "></i></a>
                    </div>
                </div>
                <div class="widget-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

                </div>
            </div>

            <div class="widget flat">
                <div class="widget-header lined">
                <span class="foreIcon">
                    <i class="fa fa-check-circle blueberry"></i>
                </span>

                    <span class="widget-caption ft-18">单栏表单</span>

                    <div class="widget-buttons">
                        <a href="#" data-toggle="collapse"><i class="fa fa-minus "></i></a>
                    </div>
                </div>
                <div class="widget-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
                </div>
            </div>

            <div class="widget flat">
                <div class="widget-header lined">
                <span class="foreIcon">
                    <i class="fa fa-check-circle blue"></i>
                </span>

                    <span class="widget-caption ft-18">单栏表单</span>

                    <div class="widget-buttons">
                        <a href="#" data-toggle="collapse"><i class="fa fa-minus "></i></a>
                    </div>
                </div>
                <div class="widget-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
                </div>
            </div>


        </div>
    </div>

</div>

<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>

<script src="../static/js/ba-resize.js"></script>

<script src="../static/js/beyond.js"></script>


<script>
    $(function () {

        $(".right-wrap").resize(function () {
            var rightWrap = $(".right-wrap").height();
            var rightWrapLastChild = $(".right-wrap .widget:last-child").height();
            $(".line,.left-wrap").css({
                height: rightWrap - rightWrapLastChild - 36 + "px"
            });
        });
        $(".right-wrap").trigger('resize');

        $(".toggleWidget").click(function () {
            var hasClass = $($(".widget")[0]).hasClass('collapsed');
            if (hasClass) {
                //最终要去掉
                $(".widget").each(function () {
                    var that = this;
                    if ($(that).hasClass('collapsed')) {

                        $(that).find('.widget-body').slideDown(200, function () {
                            $(that).removeClass("collapsed")
                        });
                    }

                });
            } else {
                //最终要加掉
                $(".widget").each(function () {

                    var that = this;
                    if (!$(that).hasClass('collapsed')) {
                        $(that).find('.widget-body').slideUp(200, function () {
                            $(that).addClass("collapsed")
                        });
                    }

                });
            }
        });

    });
</script>


<script>

</script>

</body>

</html>